<template>
  <div v-loading="loading">
    <!--查询条件start --111s-->
    <el-card class="box-card acc-card">
      <el-form :inline="true" :model="query" class="query-form" size="small">
        <el-form-item>
          <el-date-picker
            v-model="createTime"
            unlink-panels
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="left"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="dateChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-input
            v-model="query.content"
            placeholder="请输入用户昵称"
            prefix-icon="el-icon-search"
            @keyup.enter.native="onSubmit"
            clearable
          ></el-input>
        </el-form-item>
         <el-form-item class="query-form-item">
          <el-input
            v-model="query.enterprisename"
            placeholder="请输入企业名称"
            prefix-icon="el-icon-search"
            @keyup.enter.native="onSubmit"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onRest"
          ></el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
        <!--            <el-form-item style="right: 10px;position: absolute;">-->
        <!--                <el-button type="primary" icon="el-icon-edit" @click.native="showmseeage()">站内信-->
        <!--                </el-button>-->
        <!--            </el-form-item>-->
      </el-form>
      <!--查询条件end-->

      <!--列表start --222s-->
      <el-table
        ref="multipleTable"
        v-loading="loading"
        height="500"
        :data="list"
        :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="50" align="center" fixed />
        <el-table-column label="序号" type="index" width="80" align="center">
          <template scope="scope">
            <span>{{
              (query.currentPage - 1) * query.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" prop="userpic" align="center" width="100">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.userpic"
              placement="right"
              trigger="hover"
            >
              <img
                :src="scope.row.userpic"
                style="width: 400px; border-radius: 3px"
              />
              <img
                slot="reference"
                :src="scope.row.userpic"
                style="max-height: 80px; max-width: 50px; border-radius: 5px"
              />
            </el-popover>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="用户昵称"
          prop="usernick"
          width="140"
          align="center"
        />
        <el-table-column
          label="手机号码"
          prop="usermobile"
          align="center"
          width="150"
        />
        <el-table-column
          label="企业名称"
          prop="enterprisename"
          align="center"
        />
        <el-table-column
          label="社会统一信用代码"
          prop="registrationnumber"
          align="center"
        />
        <el-table-column
          label="注册时间"
          width="180"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.userregisttime != null"></i>
            <span v-if="scope.row.userregisttime != null">{{
              scope.row.userregisttime | formatDateStr('yyyy-MM-dd hh:mm:ss')
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <!-- <el-table-column
          label="禁止登录"
          prop="userban"
          align="center"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.userban == 0 ? '允许登录' : '禁止登录' }} </span>
            <el-switch
              v-model="scope.row.userban"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="0"
              inactive-value="1"
              @change="swithchange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" width="240" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click.native="detailForm(scope.$index, scope.row)"
              >查看
            </el-button>
            <!-- <el-button
              type="danger"
              size="mini"
              @click.native="handleDel(scope.row.userid)"
              style="margin-top: 8px"
              >删除
            </el-button> -->
            <el-button
              type="info"
              size="mini"
              @click.native="handleVIP(scope.row.userid)"
              style="margin-top: 8px"
              >VIP</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--列表end --222e-->

      <!--全选删除start-->
      <div class="left-container">
        <el-button type="danger" size="small" @click="delGroup()"
          >删除已选</el-button
        >
        <transition name="el-fade-in-linear">
                <el-button size="small" @click="toggleSelection()" v-show="cancelToggle">取消选择</el-button>
            </transition>
      </div>
      <!--全选删除end-->

      <!--分页模块start-->
      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
    </el-card>
     
  </div>
</template>
<script>
import { getList, updateUser, delUser } from '../../api/mbuser/mbuser'

export default {
  data() {
    return {
      pickerOptions: {
        //快速选择日期
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      query: {
        //查询条件
        content: '',
        enterprisename:'',
        startTime: '',
        endTime: '',
        currentPage: 1,
        pageSize: 5,
      },
      createTime: [], //选择日期时需要的model
      list: [], //列表集合
      totalNumber: 0, //分页总页数
      loading: true, //列表加载
      formLoading: false, //表单提交加载
      cancelToggle: false, //列表是否全选
      multipleSelection: [], //多选集合
    }
  },
  methods: {
    /*日期选择事件*/
    dateChange(val) {
      if (val == null) {
        this.query.startTime = ''
        this.query.endTime = ''
      } else {
        this.query.startTime = val[0]
        this.query.endTime = val[1]
        this.query.currentPage = 1
      }
      this.getList()
      console.log(this.query)
    },
    /*获取列表事件*/
    getList() {
      this.loading = true
      getList(this.query)
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message)
            this.loading = false
            return false
          }

          this.list = response.data.list || []
          if (this.list.length > 0) {
            let mylist = this.list
            for (var i = 0; i < mylist.length; i++) {
              mylist[i].userban = mylist[i].userban.toString()
            }
            this.list = mylist
          }

          this.totalNumber = response.data.totalNumber || 0
          setTimeout(() => {
            this.loading = false
          }, 0.3 * 1000)
        })
        .catch(() => {
          this.loading = false
          this.list = []
        })
    },
    //开关禁止登陆
    swithchange(row) {
      if (row !== null) {
        var params = new URLSearchParams()
        params.append('userid', row.userid)
        params.append('userban', row.userban)
        updateUser(params).then((response) => {
          this.formLoading = false
          if (response.code != 0) {
            this.$message.error(response.message)
            return false
          }
          this.$message.success('操作成功')
        })
      }
    },
    //显示 查看弹框
    detailForm(index, row) {
      if (row !== null) {
        this.$router.push({
          path:'mbUserDetail',
          query:Object.assign({}, row)
        })
      }
    },

    /*列表查询条件事件*/
    onSubmit() {
      this.query.currentPage = 1
      this.getList()
    },

    /*刷新*/
    onRest() {
      //刷新事件需要重置查询条件
      this.createTime = []
      this.query = {
        currentPage: 1,
        pageSize: 5,
      }
      this.getList()
    },

    /*点击页数*/
    handleCurrentChange(val) {
      this.query.currentPage = val
      this.getList()
    },

    /*选择每页条数【10,20,30,40,50】*/
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getList()
    },

    /*取消全选事件*/
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        // debugger
        this.$refs.multipleTable.clearSelection()
      }
    },

    /*列表复选框选择事件*/
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
      if (val == '') {
        this.cancelToggle = false
        return
      }
      this.cancelToggle = true
    },

    /*全选删除事件*/
    delGroup() {
      var ids = this.multipleSelection.map((item) => item.userid).join() //获取所有选中行的id组成的字符串，以逗号分隔
      if (ids == '') {
        this.$message({
          message: '请先选择',
          type: 'warning',
        })
        return
      }
      this.handleDel(ids)
    },

    /*单击删除事件*/
    handleDel(ids) {
      if (ids) {
        this.$confirm('确认要删除吗?', '提示', {
          type: 'warning',
        })
          .then(() => {
            this.loading = true
            var params = new URLSearchParams()
            params.append('ids', ids)
            delUser(params)
              .then((response) => {
                this.loading = false
                if (response.code) {
                  this.$message.error(response.message)
                  return false
                }
                this.$message.success('删除成功')
                // 刷新数据
                //this.list.splice(index, 1);
                this.getList()
              })
              .catch(() => {
                this.loading = false
              })
          })
          .catch(() => {
            this.$message.warning('已取消')
          })
      }
    },

    //vip-dialog
    handleVIP(id) {
      this.$router.push({ name: 'VIP', query: { id: id } })
    },
    //我的好友
    tomyuser(uid) {
      if (uid !== undefined) {
        // alert("=="+uid);
        this.$router.push({
          path: '/mbUser/myfriend',
          query: { uid: uid },
        })
      }
    },
    //h好友的好友
    tomyfriend(uid) {
      if (uid !== undefined) {
        // alert("=="+uid);
        this.$router.push({
          path: '/mbUser/myfriend',
          query: { uid: uid },
        })
      }
    },
    //我的订单
    tomyorder(uid) {
      if (uid !== undefined) {
        //  alert("=="+uid);
        this.$router.push({
          path: '/mbUser/myorder',
          query: { uid: uid, flag: '0' },
        })
      }
    },
    //好友订单
    tofriendorder(uid) {
      if (uid !== undefined) {
        //  alert("=="+uid);
        this.$router.push({
          path: '/mbUser/myorder',
          query: { gid: uid, flag: '1' },
        })
      }
    },

    //跳转到站内信
    showmseeage() {
      this.$router.push({ path: '/mbUser/sysMsg' })
    },
  },
  created() {
    this.getList()
  },
}
</script>
